<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ResumeForge - 专业个人简历定制平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#7B61FF',
                        dark: '#1D2939',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        display: ['Poppins', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
            .resume-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }
        }
    </style>

    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
</head>

<body class="bg-light text-dark antialiased">
<!-- 导航栏 -->
<header class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <a href="#" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                    <i class="fa fa-file-text-o text-white text-xl"></i>
                </div>
                <span class="text-xl font-display font-bold text-dark">Resume<span class="text-primary">Forge</span></span>
            </a>

            <!-- 导航链接 - 桌面端 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#features" class="text-dark/70 hover:text-primary transition-colors font-medium">功能</a>
                <a href="#templates" class="text-dark/70 hover:text-primary transition-colors font-medium">模板</a>
                <a href="#testimonials" class="text-dark/70 hover:text-primary transition-colors font-medium">用户评价</a>
                <a href="#faq" class="text-dark/70 hover:text-primary transition-colors font-medium">常见问题</a>
            </nav>

            <!-- 登录/注册按钮 -->
            <div class="flex items-center space-x-4">
                <a href="#login" class="hidden sm:inline-block text-primary hover:text-primary/80 font-medium transition-colors">登录</a>
                <a href="#register" class="inline-flex items-center px-5 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors shadow-md hover:shadow-lg">
                    免费注册
                </a>

                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-dark hover:text-primary transition-colors" id="menu-toggle">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div class="md:hidden bg-white border-t hidden" id="mobile-menu">
        <div class="container mx-auto px-4 py-3 space-y-3">
            <a href="#features" class="block text-dark/70 hover:text-primary transition-colors font-medium py-2">功能</a>
            <a href="#templates" class="block text-dark/70 hover:text-primary transition-colors font-medium py-2">模板</a>
            <a href="#testimonials" class="block text-dark/70 hover:text-primary transition-colors font-medium py-2">用户评价</a>
            <a href="#faq" class="block text-dark/70 hover:text-primary transition-colors font-medium py-2">常见问题</a>
            <a href="#login" class="block text-primary hover:text-primary/80 font-medium py-2">登录</a>
        </div>
    </div>
</header>

<main>
    <!-- 英雄区域 -->
    <section class="pt-32 pb-20 md:pt-40 md:pb-28">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center gap-12">
                <div class="lg:w-1/2 space-y-6">
                        <span class="inline-block px-4 py-2 bg-primary/10 text-primary text-sm font-semibold rounded-full">
                            专业简历定制平台
                        </span>
                    <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-display font-bold leading-tight">
                        轻松创建<br>
                        <span class="bg-gradient-to-r from-primary to-accent text-gradient">令人印象深刻</span>的简历
                    </h1>
                    <p class="text-dark/60 text-lg md:text-xl max-w-lg">
                        无需设计经验，使用我们的专业模板和智能编辑工具，30分钟内创建一份能让雇主眼前一亮的个人简历。
                    </p>
                    <div class="flex flex-wrap gap-4 pt-4">
                        <a href="#register" class="px-8 py-3.5 bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg transition-all shadow-lg hover:shadow-xl hover:shadow-primary/20 flex items-center gap-2">
                            <span>免费开始</span>
                            <i class="fa fa-arrow-right"></i>
                        </a>
                        <a href="#demo" class="px-8 py-3.5 bg-white hover:bg-gray-50 text-dark font-semibold rounded-lg transition-all border border-gray-200 shadow-md hover:shadow-lg flex items-center gap-2">
                            <i class="fa fa-play-circle-o text-primary"></i>
                            <span>观看演示</span>
                        </a>
                    </div>
                    <div class="flex items-center gap-4 pt-2">
                        <div class="flex -space-x-2">
                            <img src="https://picsum.photos/id/1001/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1002/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1003/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1004/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                        </div>
                        <div class="text-sm">
                            <span class="font-semibold">5,000+</span> 求职者正在使用
                        </div>
                    </div>
                </div>

                <!-- 主简历展示 -->
                <div class="lg:w-1/2 relative">
                    <div class="relative z-10 resume-shadow rounded-lg overflow-hidden transform rotate-1 hover:rotate-0 transition-transform duration-500">
                        <img src="https://picsum.photos/id/239/800/1000" alt="专业简历示例" class="w-full max-w-md mx-auto">
                        <div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
                    </div>
                    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-gradient-to-r from-primary/30 to-accent/30 rounded-full blur-3xl -z-10 transform scale-110"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <p class="text-center text-dark/50 text-sm mb-8">受到全球顶尖企业的信任</p>
            <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
                <div class="h-8 flex items-center">
                    <i class="fa fa-google text-2xl text-dark/60"></i>
                </div>
                <div class="h-8 flex items-center">
                    <i class="fa fa-microsoft text-2xl text-dark/60"></i>
                </div>
                <div class="h-8 flex items-center">
                    <i class="fa fa-linkedin text-2xl text-dark/60"></i>
                </div>
                <div class="h-8 flex items-center">
                    <i class="fa fa-spotify text-2xl text-dark/60"></i>
                </div>
                <div class="h-8 flex items-center">
                    <i class="fa fa-airbnb text-2xl text-dark/60"></i>
                </div>
                <div class="h-8 flex items-center">
                    <i class="fa fa-amazon text-2xl text-dark/60"></i>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特点 -->
    <section id="features" class="py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-4 py-2 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-4">
                        强大功能
                    </span>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-display font-bold mb-6">
                    为什么选择我们的简历制作工具
                </h2>
                <p class="text-dark/60 text-lg">
                    我们提供直观的编辑工具和专业模板，帮助你突出个人优势，在求职竞争中脱颖而出
                </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片 1 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover border border-gray-100">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-paint-brush text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">专业模板</h3>
                    <p class="text-dark/60">
                        20+ 精心设计的专业模板，适用于不同行业和职位级别，全部通过ATS系统测试。
                    </p>
                </div>

                <!-- 功能卡片 2 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover border border-gray-100">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-magic text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能建议</h3>
                    <p class="text-dark/60">
                        基于你的职位和行业，提供个性化内容建议，帮助你打造更有说服力的简历。
                    </p>
                </div>

                <!-- 功能卡片 3 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover border border-gray-100">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-mobile text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多设备编辑</h3>
                    <p class="text-dark/60">
                        在电脑、平板或手机上随时随地编辑你的简历，所有更改自动同步。
                    </p>
                </div>

                <!-- 功能卡片 4 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover border border-gray-100">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-file-pdf-o text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多格式导出</h3>
                    <p class="text-dark/60">
                        支持PDF、Word等多种格式导出，确保你的简历在任何设备上都能完美展示。
                    </p>
                </div>

                <!-- 功能卡片 5 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover border border-gray-100">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-shield text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据安全</h3>
                    <p class="text-dark/60">
                        采用高级加密技术保护你的个人信息，你可以完全控制谁能看到你的简历。
                    </p>
                </div>

                <!-- 功能卡片 6 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover border border-gray-100">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-history text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">版本控制</h3>
                    <p class="text-dark/60">
                        自动保存你的所有修改，随时查看历史版本，轻松比较不同版本的简历。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 简历模板展示 -->
    <section id="templates" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-4 py-2 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-4">
                        专业模板
                    </span>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-display font-bold mb-6">
                    为各种职业定制的简历模板
                </h2>
                <p class="text-dark/60 text-lg">
                    选择适合你行业和风格的模板，轻松创建专业简历
                </p>
            </div>

            <!-- 模板筛选器 -->
            <div class="flex flex-wrap justify-center gap-3 mb-12">
                <button class="px-5 py-2 bg-primary text-white rounded-full text-sm font-medium">全部模板</button>
                <button class="px-5 py-2 bg-white hover:bg-gray-100 text-dark/70 rounded-full text-sm font-medium transition-colors">创意设计</button>
                <button class="px-5 py-2 bg-white hover:bg-gray-100 text-dark/70 rounded-full text-sm font-medium transition-colors">商业金融</button>
                <button class="px-5 py-2 bg-white hover:bg-gray-100 text-dark/70 rounded-full text-sm font-medium transition-colors">技术IT</button>
                <button class="px-5 py-2 bg-white hover:bg-gray-100 text-dark/70 rounded-full text-sm font-medium transition-colors">学术教育</button>
                <button class="px-5 py-2 bg-white hover:bg-gray-100 text-dark/70 rounded-full text-sm font-medium transition-colors">医疗健康</button>
            </div>

            <!-- 模板展示网格 -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 模板 1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all card-hover group">
                    <div class="relative">
                        <img src="https://picsum.photos/id/101/600/800" alt="简约专业简历模板" class="w-full aspect-[3/4] object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                            <div class="p-6 w-full">
                                <h3 class="text-xl font-bold text-white mb-2">简约专业</h3>
                                <p class="text-white/80 text-sm mb-4">适合商业、金融和管理类职位</p>
                                <a href="#login" class="inline-block w-full py-3 bg-primary hover:bg-primary/90 text-white text-center rounded-lg font-medium transition-colors">
                                    使用此模板
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">简约专业</h3>
                        <p class="text-dark/60 text-sm">商业 • 金融 • 管理</p>
                    </div>
                </div>

                <!-- 模板 2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all card-hover group">
                    <div class="relative">
                        <img src="https://picsum.photos/id/102/600/800" alt="创意设计简历模板" class="w-full aspect-[3/4] object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                            <div class="p-6 w-full">
                                <h3 class="text-xl font-bold text-white mb-2">创意设计</h3>
                                <p class="text-white/80 text-sm mb-4">适合设计师、艺术家和创意行业</p>
                                <a href="#login" class="inline-block w-full py-3 bg-primary hover:bg-primary/90 text-white text-center rounded-lg font-medium transition-colors">
                                    使用此模板
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">创意设计</h3>
                        <p class="text-dark/60 text-sm">设计 • 艺术 • 创意</p>
                    </div>
                </div>

                <!-- 模板 3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all card-hover group">
                    <div class="relative">
                        <img src="https://picsum.photos/id/103/600/800" alt="技术专业简历模板" class="w-full aspect-[3/4] object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                            <div class="p-6 w-full">
                                <h3 class="text-xl font-bold text-white mb-2">技术专业</h3>
                                <p class="text-white/80 text-sm mb-4">适合程序员、工程师和IT专业人士</p>
                                <a href="#login" class="inline-block w-full py-3 bg-primary hover:bg-primary/90 text-white text-center rounded-lg font-medium transition-colors">
                                    使用此模板
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">技术专业</h3>
                        <p class="text-dark/60 text-sm">IT • 工程 • 技术</p>
                    </div>
                </div>
            </div>

            <div class="text-center mt-12">
                <a href="#login" class="inline-flex items-center gap-2 px-6 py-3 bg-white border border-gray-200 hover:bg-gray-50 text-dark font-semibold rounded-lg transition-colors shadow-sm hover:shadow">
                    查看全部模板 <i class="fa fa-arrow-right text-primary"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 制作流程 -->
    <section class="py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-4 py-2 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-4">
                        简单三步
                    </span>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-display font-bold mb-6">
                    轻松创建专业简历
                </h2>
                <p class="text-dark/60 text-lg">
                    我们简化了简历制作流程，让你专注于内容而非格式
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 lg:gap-12 relative">
                <!-- 连接线 - 仅桌面显示 -->
                <div class="hidden md:block absolute top-1/4 left-0 w-full h-1 bg-gray-200 -z-10"></div>

                <!-- 步骤 1 -->
                <div class="text-center">
                    <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6 shadow-lg">
                        1
                    </div>
                    <h3 class="text-xl font-bold mb-3">选择模板</h3>
                    <p class="text-dark/60">
                        浏览我们的专业模板库，选择最适合你行业和个人风格的模板。
                    </p>
                </div>

                <!-- 步骤 2 -->
                <div class="text-center">
                    <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6 shadow-lg">
                        2
                    </div>
                    <h3 class="text-xl font-bold mb-3">填写内容</h3>
                    <p class="text-dark/60">
                        通过我们的引导式表单填写你的信息，或导入现有简历自动填充。
                    </p>
                </div>

                <!-- 步骤 3 -->
                <div class="text-center">
                    <div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6 shadow-lg">
                        3
                    </div>
                    <h3 class="text-xl font-bold mb-3">下载使用</h3>
                    <p class="text-dark/60">
                        预览你的简历，根据需要调整，然后下载为PDF或其他格式使用。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 用户评价 -->
    <section id="testimonials" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-4 py-2 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-4">
                        成功案例
                    </span>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-display font-bold mb-6">
                    用户如何通过我们的简历获得面试机会
                </h2>
                <p class="text-dark/60 text-lg">
                    听听已经成功找到理想工作的用户怎么说
                </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 评价 1 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover">
                    <div class="flex items-center mb-6">
                        <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="w-14 h-14 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-bold">张明</h4>
                            <p class="text-dark/60 text-sm">软件工程师 @ 阿里巴巴</p>
                        </div>
                    </div>
                    <div class="text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-dark/80 italic">
                        "使用ResumeForge制作的简历让我在众多应聘者中脱颖而出。一周内就收到了3家大厂的面试邀请，最终成功入职阿里巴巴。"
                    </p>
                </div>

                <!-- 评价 2 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover">
                    <div class="flex items-center mb-6">
                        <img src="https://picsum.photos/id/1013/100/100" alt="用户头像" class="w-14 h-14 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-bold">李娜</h4>
                            <p class="text-dark/60 text-sm">市场营销经理 @ 腾讯</p>
                        </div>
                    </div>
                    <div class="text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-dark/80 italic">
                        "作为职场转型者，我需要一份能突出我可转移技能的简历。这个平台的模板和建议非常有帮助，让我成功从教育行业转入市场营销。"
                    </p>
                </div>

                <!-- 评价 3 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow card-hover">
                    <div class="flex items-center mb-6">
                        <img src="https://picsum.photos/id/1014/100/100" alt="用户头像" class="w-14 h-14 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-bold">王浩</h4>
                            <p class="text-dark/60 text-sm">产品设计师 @ 字节跳动</p>
                        </div>
                    </div>
                    <div class="text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                    <p class="text-dark/80 italic">
                        "创意设计模板完美展示了我的作品集和设计理念。智能建议功能帮我优化了描述语言，让我的简历更具说服力。"
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 常见问题 -->
    <section id="faq" class="py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="inline-block px-4 py-2 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-4">
                        解答疑问
                    </span>
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-display font-bold mb-6">
                    常见问题
                </h2>
                <p class="text-dark/60 text-lg">
                    关于我们的简历制作平台，你可能想知道这些
                </p>
            </div>

            <div class="max-w-3xl mx-auto space-y-4">
                <!-- FAQ 项目 1 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-semibold focus:outline-none">
                        <span>我需要设计经验才能使用这个平台吗？</span>
                        <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-6">
                        <p class="text-dark/60">
                            不需要。我们的平台专为没有设计经验的用户打造，所有模板都已专业设计，你只需填写内容即可。我们还提供智能建议，帮助你优化简历内容。
                        </p>
                    </div>
                </div>

                <!-- FAQ 项目 2 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-semibold focus:outline-none">
                        <span>我的简历会通过ATS系统筛选吗？</span>
                        <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-6">
                        <p class="text-dark/60">
                            是的。我们所有的模板都经过ATS（申请人跟踪系统）兼容性测试，确保你的简历能被招聘软件正确解析。我们还提供ATS优化建议，提高你的简历通过率。
                        </p>
                    </div>
                </div>

                <!-- FAQ 项目 3 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-semibold focus:outline-none">
                        <span>我可以创建多份不同的简历吗？</span>
                        <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-6">
                        <p class="text-dark/60">
                            当然可以。注册用户可以创建和保存多份不同的简历，方便你针对不同的职位和公司进行定制。所有简历都保存在你的账户中，随时可以编辑和使用。
                        </p>
                    </div>
                </div>

                <!-- FAQ 项目 4 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-semibold focus:outline-none">
                        <span>我的个人信息安全吗？</span>
                        <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-6">
                        <p class="text-dark/60">
                            我们非常重视用户数据安全。所有个人信息都经过加密处理，我们不会向第三方分享你的数据。你可以随时删除你的账户和所有相关信息。
                        </p>
                    </div>
                </div>

                <!-- FAQ 项目 5 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left font-semibold focus:outline-none">
                        <span>有免费版本可以使用吗？</span>
                        <i class="fa fa-chevron-down text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-6">
                        <p class="text-dark/60">
                            是的，我们提供免费版本，包含基础模板和功能。免费用户可以创建一份简历并导出为PDF格式。我们的高级版本提供更多模板、无限制简历创建和更多高级功能。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 行动召唤 -->
    <section class="py-20 bg-gradient-to-r from-primary to-accent text-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-[clamp(2rem,4vw,3rem)] font-display font-bold mb-6">
                    准备好创建你的专业简历了吗？
                </h2>
                <p class="text-white/80 text-lg mb-10 max-w-2xl mx-auto">
                    加入 thousands 已经通过我们的平台找到理想工作的用户，今天就开始制作你的完美简历。
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#register" class="px-8 py-3.5 bg-white text-primary hover:bg-gray-100 font-semibold rounded-lg transition-all shadow-lg hover:shadow-xl">
                        免费注册，开始制作
                    </a>
                    <a href="#demo" class="px-8 py-3.5 bg-transparent hover:bg-white/10 text-white font-semibold rounded-lg transition-all border border-white/30">
                        观看演示
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 登录模态框 -->
    <div id="login-modal" class="fixed inset-0 bg-dark/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden transform transition-all scale-95 opacity-0" id="modal-content">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold">用户登录</h3>
                    <button id="close-login" class="text-dark/50 hover:text-dark transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form>
                    <div class="mb-4">
                        <label for="email" class="block text-sm font-medium text-dark/70 mb-1">邮箱地址</label>
                        <input type="email" id="email" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="your@email.com">
                    </div>
                    <div class="mb-6">
                        <div class="flex justify-between mb-1">
                            <label for="password" class="block text-sm font-medium text-dark/70">密码</label>
                            <a href="#" class="text-sm text-primary hover:text-primary/80">忘记密码？</a>
                        </div>
                        <input type="password" id="password" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="输入你的密码">
                    </div>
                    <button type="submit" class="w-full py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg transition-colors">
                        登录
                    </button>
                </form>
                <div class="my-4 text-center">
                    <span class="text-dark/50">或使用以下方式登录</span>
                </div>
                <div class="flex gap-3">
                    <button class="flex-1 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
                        <i class="fa fa-google text-dark/70"></i>
                        <span>Google</span>
                    </button>
                    <button class="flex-1 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
                        <i class="fa fa-weixin text-dark/70"></i>
                        <span>微信</span>
                    </button>
                </div>
            </div>
            <div class="p-6 bg-gray-50 text-center">
                <span class="text-dark/70">还没有账号？</span>
                <a href="#register" id="switch-to-register" class="text-primary font-medium hover:text-primary/80 ml-1">立即注册</a>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="fixed inset-0 bg-dark/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden transform transition-all scale-95 opacity-0" id="register-content">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold">创建账号</h3>
                    <button id="close-register" class="text-dark/50 hover:text-dark transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form>
                    <div class="mb-4">
                        <label for="reg-name" class="block text-sm font-medium text-dark/70 mb-1">姓名</label>
                        <input type="text" id="reg-name" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入你的姓名">
                    </div>
                    <div class="mb-4">
                        <label for="reg-email" class="block text-sm font-medium text-dark/70 mb-1">邮箱地址</label>
                        <input type="email" id="reg-email" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="your@email.com">
                    </div>
                    <div class="mb-6">
                        <label for="reg-password" class="block text-sm font-medium text-dark/70 mb-1">设置密码</label>
                        <input type="password" id="reg-password" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="至少8个字符">
                    </div>
                    <button type="submit" class="w-full py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg transition-colors">
                        免费注册
                    </button>
                    <p class="text-xs text-dark/50 text-center mt-4">
                        点击注册，即表示你同意我们的<a href="#" class="text-primary">服务条款</a>和<a href="#" class="text-primary">隐私政策</a>
                    </p>
                </form>
                <div class="my-4 text-center">
                    <span class="text-dark/50">或使用以下方式注册</span>
                </div>
                <div class="flex gap-3">
                    <button class="flex-1 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
                        <i class="fa fa-google text-dark/70"></i>
                        <span>Google</span>
                    </button>
                    <button class="flex-1 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
                        <i class="fa fa-weixin text-dark/70"></i>
                        <span>微信</span>
                    </button>
                </div>
            </div>
            <div class="p-6 bg-gray-50 text-center">
                <span class="text-dark/70">已有账号？</span>
                <a href="#login" id="switch-to-login" class="text-primary font-medium hover:text-primary/80 ml-1">立即登录</a>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white pt-16 pb-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
            <div>
                <div class="flex items-center space-x-2 mb-6">
                    <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                        <i class="fa fa-file-text-o text-primary text-xl"></i>
                    </div>
                    <span class="text-xl font-display font-bold">Resume<span class="text-primary">Forge</span></span>
                </div>
                <p class="text-white/60 mb-6">
                    专业的简历制作平台，帮助求职者打造令人印象深刻的简历，提升求职成功率。
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:bg-primary hover:text-white transition-colors">
                        <i class="fa fa-facebook"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:bg-primary hover:text-white transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:bg-primary hover:text-white transition-colors">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:bg-primary hover:text-white transition-colors">
                        <i class="fa fa-linkedin"></i>
                    </a>
                </div>
            </div>

            <div>
                <h3 class="font-bold text-lg mb-6">产品</h3>
                <ul class="space-y-3">
                    <li><a href="#templates" class="text-white/60 hover:text-primary transition-colors">简历模板</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">简历示例</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">求职指南</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">薪资查询</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">职业测评</a></li>
                </ul>
            </div>

            <div>
                <h3 class="font-bold text-lg mb-6">公司</h3>
                <ul class="space-y-3">
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">关于我们</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">联系我们</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">招贤纳士</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">合作伙伴</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">博客</a></li>
                </ul>
            </div>

            <div>
                <h3 class="font-bold text-lg mb-6">支持</h3>
                <ul class="space-y-3">
                    <li><a href="#faq" class="text-white/60 hover:text-primary transition-colors">常见问题</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">使用教程</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">隐私政策</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">服务条款</a></li>
                    <li><a href="#" class="text-white/60 hover:text-primary transition-colors">反馈建议</a></li>
                </ul>
            </div>
        </div>

        <div class="border-t border-white/10 pt-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-white/60 text-sm mb-4 md:mb-0">
                    © 2023 ResumeForge. 保留所有权利.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-white/60 hover:text-primary text-sm transition-colors">隐私政策</a>
                    <a href="#" class="text-white/60 hover:text-primary text-sm transition-colors">服务条款</a>
                    <a href="#" class="text-white/60 hover:text-primary text-sm transition-colors">Cookie政策</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');

    menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    // 导航栏滚动效果
    const navbar = document.querySelector('header');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('shadow-md');
            navbar.classList.remove('shadow-sm');
        } else {
            navbar.classList.remove('shadow-md');
            navbar.classList.add('shadow-sm');
        }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            const targetId = this.getAttribute('href');
            if (targetId === '#') return;

            // 如果是登录或注册，打开对应的模态框
            if (targetId === '#login') {
                openLoginModal();
                return;
            } else if (targetId === '#register') {
                openRegisterModal();
                return;
            }

            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });

                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
            }
        });
    });

    // FAQ 折叠功能
    const faqToggles = document.querySelectorAll('.faq-toggle');

    faqToggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
            const content = toggle.nextElementSibling;
            const icon = toggle.querySelector('i');

            // 切换当前FAQ的显示状态
            content.classList.toggle('hidden');
            icon.classList.toggle('rotate-180');

            // 关闭其他打开的FAQ
            faqToggles.forEach(otherToggle => {
                if (otherToggle !== toggle) {
                    const otherContent = otherToggle.nextElementSibling;
                    const otherIcon = otherToggle.querySelector('i');

                    otherContent.classList.add('hidden');
                    otherIcon.classList.remove('rotate-180');
                }
            });
        });
    });

    // 登录和注册模态框功能
    const loginModal = document.getElementById('login-modal');
    const registerModal = document.getElementById('register-modal');
    const modalContent = document.getElementById('modal-content');
    const registerContent = document.getElementById('register-content');
    const closeLogin = document.getElementById('close-login');
    const closeRegister = document.getElementById('close-register');
    const switchToRegister = document.getElementById('switch-to-register');
    const switchToLogin = document.getElementById('switch-to-login');

    function openLoginModal() {
        loginModal.classList.remove('hidden');
        // 触发动画
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
        // 禁止背景滚动
        document.body.style.overflow = 'hidden';
    }

    function closeLoginModal() {
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');
        // 隐藏模态框
        setTimeout(() => {
            loginModal.classList.add('hidden');
            document.body.style.overflow = '';
        }, 300);
    }

    function openRegisterModal() {
        registerModal.classList.remove('hidden');
        // 触发动画
        setTimeout(() => {
            registerContent.classList.remove('scale-95', 'opacity-0');
            registerContent.classList.add('scale-100', 'opacity-100');
        }, 10);
        // 禁止背景滚动
        document.body.style.overflow = 'hidden';
    }

    function closeRegisterModal() {
        registerContent.classList.remove('scale-100', 'opacity-100');
        registerContent.classList.add('scale-95', 'opacity-0');
        // 隐藏模态框
        setTimeout(() => {
            registerModal.classList.add('hidden');
            document.body.style.overflow = '';
        }, 300);
    }

    closeLogin.addEventListener('click', closeLoginModal);
    closeRegister.addEventListener('click', closeRegisterModal);

    switchToRegister.addEventListener('click', () => {
        closeLoginModal();
        setTimeout(openRegisterModal, 300);
    });

    switchToLogin.addEventListener('click', () => {
        closeRegisterModal();
        setTimeout(openLoginModal, 300);
    });

    // 点击模态框外部关闭
    loginModal.addEventListener('click', (e) => {
        if (e.target === loginModal) {
            closeLoginModal();
        }
    });

    registerModal.addEventListener('click', (e) => {
        if (e.target === registerModal) {
            closeRegisterModal();
        }
    });

    // ESC键关闭模态框
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeLoginModal();
            closeRegisterModal();
        }
    });
</script>
</body>
</html>
